<template>
 <div class="homepage">
  <transition name="slide">
          <router-view></router-view>
  </transition>

  <header>
    <div class="header">
     <p v-for = "x in lists" >{{x.heas}}</p>
    </div>
    <p class="el-icon-search"></p>
  </header>
  <nav>
      <div class="Up">
         <p class="img"><img src="../../static/imgs/creat.jpg" /></p>
         <div class="center">
           <span>i92015864</span>
           <button>LV4</button>
           <button>VIP</button>
         </div>
         <div class="down">
             <span>余额 :</span>
             <span>0阅读</span>
             <span>98 代金券</span>
         </div> 
      </div>
  </nav>
  <!-- <nav class="Lo_myorder_nav01">
    <ul>
        <li v-for='(item,index) in items' @click="$router.push({path:item.path})"
            @touchstart="Iscolor=index"
            :class="{itemColor:Iscolor==index}">
            {{item.text}}
        </li>
       
    </ul>
  </nav> -->
 </div>
</template>

<script>
export default {
 name:'homepage',
 data:function(){
  return {
    lists:[
      {heas:'我的'},
      {heas:'书架'},
      {heas:'书城'}
    ]
  }
 }     
}

</script>

<style scoped lang="less">
.px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
header{
    position:relative;
  .header{
      .px2rem(height,88);
      .px2rem(font-size,35);
      .Flex;
      justify-content: space-around;
      align-items:center;
      background:#FB8876;
      p{
        color:#FEE1DE;
      }
  } 
  .el-icon-search{
    position:absolute;
    .px2rem(right,10);
    .px2rem(font-size,40);
    color:#fff;
    .px2rem(top,30);
  }
}
.Up{
  .Flex;
  flex-direction: column;  
  align-items:center;
  .img{
    
  }
  .center{
    
  }
  .down{
    color:#B2B2B2;
  }
}

.slide-enter{
    transform: translateX(100%);
}
.slide-enter-active{
    transition: all .3s ease;
}

/*.slide-leave{
    transform: translateX(-100%);
}*/

.slide-leave-active{
    transform: translateX(-100%);
    transition: all .5s ease;
}

</style>


